<template>
    <el-container>
        <el-main>
             <div id="container">
                <img id="img" src="/static/img/department.jpg" usemap="imgMap"/>
                <map name="imgMap" >
                </map>
                <div id="mapBorder" ></div>
                <svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
            </div>
        </el-main>
        <el-aside width="35%">
            <div style="height:50%" >
                <br>
                <br>
                <br>
                广东惠州工业园区的前身是惠州数码工业园区，于2002年1月8日设立，是惠州市政府重点建设的工业园区。园区规划控制总面积30平方公里。
                首期建设面积10平方公里，目前已经基本完成一期2.5平方公里的招商工作，正在紧锣密鼓地进行二期3平方公里的土地平整及招商的前期准备工作。
                园区位于惠大高速公路两侧，北接南部新城，南靠永湖镇，东临良井镇，西为三栋镇，处于惠州数码信息、科教文化、石化重工业三条战略经济产业带中心区域。
                规划控制总面积45平方公里，建设用地面积30平方公里。规划分为产业区、配套区、服务区、生态区四个区域。产业区、配套区、生态区基本上分布在园内惠大高速公路以东、淡水河两侧。
                园区按照“一湖二片三区四园”的空间布局模式，形成生态区、生活区、产业区、配套区。
                此外，结合惠州南部新城建设的总体规划，在区内惠大高速公路以西位置布置10平方公里的商业配套用地，建设一批商业、住宅、文体、娱乐等生活配套设施。
            </div>
            
            <div style="height:50%" >
                <dataMap></dataMap>
            </div>
        </el-aside>
    </el-container>
    <!--
    <div id="echartsMap">
        <table style="height:100%;width:100%;">
            <tr>
                <td id="tdMap" rowspan="2">
                    <div id="container">
                            <img id="img" src="/static/img/department.jpg" usemap="imgMap"/>
                            <map name="imgMap" >
                            </map>
                            <div id="mapBorder" ></div>
                            <svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
                        </div>
                </td>
                <td>
                    <div id="echartsRigthTop">
                        test
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="echartsRigthBottom">
                        <dataMap></dataMap>
                    </div>
                </td>
            </tr>
        </table> 
    </div>
    -->
  
</template>

<script>
    import TestWeifei from '../../echartsChina/testWeifei'
    var xmlns_svg = "http://www.w3.org/2000/svg";

    /**超链接地址*/
    var baseHref = "https://www.baidu.com/s?ie=UTF-8&wd=";
    var mapAreas = [
        {"keyword": "1号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [561,166,858,248,856,295,813,325,522,230,524,180],"alt":"1号楼"},
        {"keyword": "2号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [440,220,750,320,740,370,700,400,400,290,400,240],"alt":"2号楼"},
        {"keyword": "3号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [693,424,900,275,926,268,947,289,745,440,695,462],"alt":"3号楼"},
        {"keyword": "4号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [455,379,706,477,712,505,670,533,438,457,432,402],"alt":"4号楼"},
        {"keyword": "5号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [353,448,604,567,604,593,560,621,312,502,313,473],"alt":"5号楼"},
        {"keyword": "6号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [137,351,279,413,282,459,231,488,110,431,106,375],"alt":"6号楼"},
        {"keyword": "7号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [200,322,227,307,383,373,383,401,361,415,199,343],"alt":"7号楼"},
        {"keyword": "8号楼:企业一，企业二，企业三，企业四，企业五", "shape": "poly", "coords": [268,273,375,227,378,271,294,307,267,296],"alt":"8号楼"}
    ];

    export default{
        components:{
            'dataMap':TestWeifei,
        },
        data(){
            return {
                img : document.getElementById("img"),
                imgMap : document.getElementsByName("imgMap")[0],
                mapBorder : document.getElementById("mapBorder"),
                svg : document.getElementById("svg"),
                timer:null,
            }
        },
        mounted() {
            this.timer = setTimeout( ()=> {
                this.intiMap();
            }, 1000); 
        },
        methods:{
            intiMap(){
                svg.setAttribute('width',0)
                svg.setAttribute('height',0)
                //不知道什么原因imgMap初始化失败，这里加个判断如果imgMap为null，重新初始化
                if(typeof(imgMap)=="undefined")
                    this.imgMap = document.getElementsByName("imgMap")[0];

                mapAreas.forEach((region)=> {
                    //添加area
                    var area = document.createElement("area");
                    area.shape = region.shape;
                    area.coords = region.coords.join(",");
                    area.href = baseHref + encodeURI(region.keyword);
                    area.target = "_blank";
                    area.title = region.keyword;
                    //area.addEventListener("mouseenter", showBorder);
                    //area.addEventListener("mouseleave", hideBorder);
                    this.imgMap.appendChild(area);

                    //添加svg
                    var svgElem;
                    switch(region.shape) {
                    case "circle":
                        svgElem = this.createSvgElem("circle");
                        svgElem.setAttribute("cx", region.coords[0]);
                        svgElem.setAttribute("cy", region.coords[1]);
                        svgElem.setAttribute("r", region.coords[2]);
                        break;
                    case "rect":
                        svgElem = this.createSvgElem("rect");
                        svgElem.setAttribute("x", region.coords[0]);
                        svgElem.setAttribute("y", region.coords[1]);
                        svgElem.setAttribute("width", region.coords[2] - region.coords[0]);
                        svgElem.setAttribute("height", region.coords[3] - region.coords[1]);
                        break;
                    case "poly":
                        svgElem = this.createSvgElem("polygon");
                        svgElem.setAttribute("points", region.coords.join(" "));
                        break;
                    }
                    svgElem.setAttribute("class", "normalSvgBorder");
                    svgElem.addEventListener("mouseenter", this.showSvgBorder);
                    svgElem.addEventListener("mouseleave", this.hideSvgBorder);
                    svg.appendChild(svgElem);
                });

            },
            createSvgElem(elemTag) {
                return document.createElementNS(xmlns_svg, elemTag);
            },

            showSvgBorder() {
                event.target.setAttribute("class", "focusSvgBorder");
            },

            hideSvgBorder() {
                event.target.setAttribute("class", "normalSvgBorder");
            },

            showBorder(){
                //offset是相对于父对象的边距. 对于普通元素用Left,Top; 对于event使用X,Y
                var x = img.offsetLeft;
                var y = img.offsetTop;
                var coords = event.target.coords.split(",");
                for(var i=0; i<coords.length; i++) {
                    coords[i] = parseInt(coords[i]);
                }
                switch(event.target.shape) {
                case "circle":
                    mapBorder.style.borderRadius = "50%";
                    mapBorder.style.left = x + coords[0] - coords[2] + "px";
                    mapBorder.style.top = y + coords[1] - coords[2] + "px";
                    var size = 2 * coords[2];
                    //这里一定要加单位，否则设置无效
                    mapBorder.style.width = size + "px";
                    mapBorder.style.height = size + "px";
                break;
                case "rect":
                    mapBorder.style.borderRadius = 0;
                    mapBorder.style.left = x + coords[0] + "px";
                    mapBorder.style.top = y + coords[1] + "px";
                    mapBorder.style.width = coords[2] - coords[0] + "px";
                    mapBorder.style.height = coords[3] - coords[1] + "px";
                break;
                case "poly":
                    //边框只能是矩形或者圆形，不能是任意的多边形
                break;
                }
                mapBorder.style.display = "block";
            },

            hideBorder(){
                mapBorder.style.display = "none";
            },

            // getImgStyle(element){
            //     if(typeof(window.getComputedStyle)!='undefined') 
            //         //如果支持W3C，使用getComputedStyle来获取样式 
            //         return window.getComputedStyle(element,null)
            //     else
            //         return element.currentStyle
                
            // },
        },
    }
    
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #container {
        position: relative;
        margin: 50px;
        border: 1px dashed black;
        display: inline-block;
    }
    #mapBorder {
        position: absolute;
        border: 2px solid red;
        display: none;
    }
    #svg {
        position: absolute;
        top: 0;
        left: 0;
    }
    .normalSvgBorder {
        fill: rgba(255,0,0,0.6);
        stroke: red;
        stroke-width: 2;
        stroke-dasharray: 5;
    }
    .focusSvgBorder {
        fill: transparent;
        stroke: red;
        stroke-width: 5;
    }
</style>